import React, {Component} from 'react';
import axios from "axios";
import BookList from "./components/BookList";
// 渲染属性：当组件中的结构有一部分不同，不同的部分可以通过渲染属性完成
class App extends Component {
    state = {
        bookInfo:{}
    }
    render() {
        return (
            <div>
                <BookList render={()=>(
                    <h3 style={{color:"blue"}}>{"男生必读"}</h3>
                )} bookInfo={this.state.bookInfo.boy}/>
                <hr/>
                <BookList render={()=>(
                    <h3 style={{color:"red"}}>{"女生爱看"}</h3>
                )} bookInfo={this.state.bookInfo.girl}></BookList>
            </div>
        );
    }
    componentDidMount() {
        axios.get("http://zhangpeiyue.com:8080/book.json").then(value=>{
            this.setState({
                bookInfo:value.data
            })
        })
    }
}

export default App;